<template>
  <div class="options-box">
    <template v-for="(item, index) in optionItems">
      <el-popover
        v-if="item.type == 'braid-table'"
        :key="index"
        placement="top"
        width="200"
        v-model="tablePopover"
      >
        <div>
          <el-checkbox-group v-model="item.selectCol">
            <el-row>
              <el-col
                v-for="col in item.columnsAttr"
                :key="col.name"
                :span="12"
              >
                <el-checkbox :label="col.name">{{ col.title }}</el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
          <el-button
            size="mini"
            type="primary"
            @click="
              (e) => {
                addTempItem(e, item);
              }
            "
            >确定</el-button
          >
        </div>
        <el-button size="mini" slot="reference">{{ item.title }}</el-button>
      </el-popover>
      <el-button
        v-else
        size="mini"
        :key="index + '-ele'"
        @click="
          (e) => {
            addTempItem(e, item);
          }
        "
        >{{ item.title }}</el-button
      >
    </template>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, ref, computed } from "vue-demi";
import { getVptd } from "../../../utils/compat";
export default defineComponent({
  name: "options",
  components: {},
  setup() {
    const instance = getCurrentInstance();
    const vptd = getVptd(instance);
    const tablePopover = ref(false);
    const optionItems = computed(() => {
      return vptd.state?.optionItems;
    });
    const addTempItem = (e, item) => {
      switch (item.type) {
        case "braid-table": {
          let selectCol = [];
          item.selectCol.forEach((itemName) => {
            let colInfo = item.columnsAttr.find((col) => col.name === itemName);
            if (colInfo) {
              selectCol.push(colInfo);
            }
          });
          item.columns = selectCol; //表格显示的字段
          vptd.dispatch("addTempItem", item);
          tablePopover.value = false;
          break;
        }
        default:
          vptd.dispatch("addTempItem", item);
      }
    };
    return {
      optionItems,
      tablePopover,
      addTempItem,
    };
  },
});
</script>

<style lang="scss">
.options-box {
  .el-button {
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 0;
  }
}
</style>
